<template>
  <div>
    <h2>研究props变化带来的更新</h2>
    <ul>
      <li><button @click="list = [4, 5, 6]">修改list</button></li>
      <li><button @click="obj = {a:2, b:4, c: 6}">修改obj</button></li>
    </ul>
    <div>Son组件：</div>
    <Son :list="list" :obj="obj" :list-async="listAsync" :obj-async="objAsync"></Son>
  </div>
</template>

<script>
  import Son from './Son'
  export default {
    name: "Index",
    components: {
      Son
    },
    data() {
      return {
        list: [1, 2, ,3],
        obj: {
          a: 1,
          b: 2,
          c: 3
        },
        listAsync: [],
        objAsync: {}
      }
    },
    methods: {
      setData() {
        return new Promise(resolve => {
          console.log(2);
          setTimeout(_ => {
            console.log(2.2);
            this.listAsync = [7, 8, 9];
            this.objAsync = {a: 7, b: 8, c: 9};
            resolve()
          }, 2000)
        })
      }
    },
    async mounted() {
      console.log(1);
      await this.setData().then(_ => {
        console.log('then');
      })
      console.log(3);
    }
  }
</script>

<style scoped>

</style>
